<script>
export default {
  name: 'App',
  setup() {
    const list = [
      { id: 1, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg' },
      { id: 2, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg' },
      { id: 3, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg' },
      { id: 4, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg' },
      { id: 5, imgUrl: 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg' }
    ]

    return { list }
  }
}

</script>

<template>
  <main>
    <ul>
      <li>
        <div class="duihua">
          <HelloWorld />
        </div>
      </li>
      <li>
        <div class="duihua">
          <Xingxing />
        </div>
      </li>
      <li>
        <div class="home-banner">
          <carousel :list="list" :duration="1500" :autoPlay="true" />
        </div>
      </li>
    </ul>
    <comGoBackTop />
  </main>
</template>
<style lang="scss" scoped>
main {
  width: 100vw;
  height: 100vh;

  ul {
    width: 100%;
    height: 100%;
    display: flex;

    li {
      width: 30%;
      height: 30%;
      list-style: none;
      border: 1px solid gray;

      .duihua {
        width: 100%;
        height: 100%;
      }

      .home-banner {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
